<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- /* ::meta, ::title, ::link, ::script */ -->
<head th:replace="fragment :: common_head(~{::meta},~{::title},~{},~{::style},~{::script})">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Employee List</title>
    <style>
        li { margin: 5px 0; background-color: aliceblue; }
        .list { display: inline-block; width: 120px; background-color: antiquewhite; padding: 0 10px; text-align: center; }
        .odd { background-color: aqua; }
        .even { background-color: orangered; }
    </style>
    <script>
        $(function() {
            $('.delete').click(function() {
                var url = $(this).attr('href');
                $('.for-delete').attr('action', url).submit();
                return false;
            });
        });
    </script>
</head>
<body>
<!-- fragment 是 thymeleaf 视图解析器识别的视图名 -->
<header id="header" th:replace="fragment :: header"></header>

<div id="content">
    <h2>Employee List</h2>
    <form action="#" class="for-delete" method="post">
        <input type="hidden" name="_method" value="DELETE">
    </form>
    <a href="#" th:href="@{/employee/emp}">添加员工</a>
    <ul>
        <li>
            <span class="list">编号</span>
            <span class="list">姓名</span>
            <span class="list">性别</span>
            <span class="list">生日</span>
            <span class="list">邮箱</span>
            <span class="list">部门</span>
            <span class="list">编辑</span>
            <span class="list">删除</span>
        </li>
        <li th:each="emp, status: ${employees}" th:class="${status.odd} ? 'odd': 'even'">
            <span class="list" th:text="${emp.id}"></span>
            <span class="list" th:text="${emp.name}"></span>
            <span class="list" th:text="${emp.gender == 1} ? '男': '女'"></span>
            <span class="list" th:text="${{emp.birthday}}"></span>
            <span class="list" th:text="${emp.email}"></span>
            <span class="list" th:text="${emp.department.name}"></span>
            <span class="list"><a href="#" th:href="@{/employee/emp/{empId}(empId=${emp.id})}">编辑</a></span>
            <span class="list"><a href="#" class="delete" th:href="@{/employee/emp/{empId}(empId=${emp.id})}">删除</a></span>
        </li>
    </ul>
</div>

<footer id="footer" th:replace="fragment :: footer"></footer>

</body>
</html>
